<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7-5动态添加表格内容</title>
    <title>表格添加内容</title>
    <style>
        #contentTable {
            width: 100%;
            border-collapse: collapse;
        }
        #contentTable th, #contentTable td {
            border: 1px solid black;
            padding: 8px;
        }
        #contentTable th {
            background-color: #c600ff;
        }
        #contentTable tr:first-child {
            background-color: #eaa7bc;
        }
        #contentTable tr:not(:first-child) {
            background-color: #eaa7bc;
        }
    </style>
</head>
<body>
<div id="parentDiv">
    <input type="text" id="nameInput" placeholder="请输入姓名">
    <input type="email" id="emailInput" placeholder="请输入邮箱">
    <button onclick="addContent()">添加</button>
</div>
<table id="contentTable">
    <thead>
    <tr>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
    function addContent() {
        var parentDiv = document.getElementById("parentDiv");
        var nameInput = document.getElementById("nameInput");
        var emailInput = document.getElementById("emailInput");
        if (nameInput.value === '' || emailInput.value === '') {
            alert("请输入姓名和邮箱");
            return;
        }
        var newRow = document.createElement("tr");
        var nameCell = document.createElement("td");
        var emailCell = document.createElement("td");
        nameCell.textContent = nameInput.value;
        emailCell.textContent = emailInput.value;
        newRow.appendChild(nameCell);
        newRow.appendChild(emailCell);
        var tableBody = document.querySelector("#contentTable tbody");
        tableBody.appendChild(newRow);
        nameInput.value = '';
        emailInput.value = '';
    }
</script>
</body>
</html>